<template>
  <div class="user-guide">
    <!-- 新手引导遮罩 -->
    <div v-if="showGuide" class="guide-overlay" @click="skipGuide">
      <div class="guide-content" @click.stop>
        <div class="guide-header">
          <h3>{{ currentStep.title }}</h3>
          <el-button type="text" @click="skipGuide" class="skip-btn">跳过引导</el-button>
        </div>
        
        <div class="guide-body">
          <div class="guide-image" v-if="currentStep.image">
            <img :src="currentStep.image" :alt="currentStep.title" />
          </div>
          <div class="guide-description">
            <p>{{ currentStep.description }}</p>
            <ul v-if="currentStep.tips">
              <li v-for="tip in currentStep.tips" :key="tip">{{ tip }}</li>
            </ul>
          </div>
        </div>
        
        <div class="guide-footer">
          <div class="guide-progress">
            <span>{{ currentStepIndex + 1 }} / {{ guideSteps.length }}</span>
            <el-progress 
              :percentage="((currentStepIndex + 1) / guideSteps.length) * 100" 
              :show-text="false"
              :stroke-width="4"
            />
          </div>
          <div class="guide-actions">
            <el-button 
              v-if="currentStepIndex > 0" 
              @click="prevStep"
              size="small"
            >
              上一步
            </el-button>
            <el-button 
              v-if="currentStepIndex < guideSteps.length - 1" 
              type="primary" 
              @click="nextStep"
              size="small"
            >
              下一步
            </el-button>
            <el-button 
              v-else 
              type="primary" 
              @click="finishGuide"
              size="small"
            >
              完成
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 帮助按钮 -->
    <el-button 
      v-if="!showGuide" 
      class="help-btn" 
      type="primary" 
      circle 
      @click="startGuide"
    >
      <el-icon><QuestionFilled /></el-icon>
    </el-button>

    <!-- 快捷操作提示 -->
    <el-tour 
      v-model="showTour" 
      :steps="tourSteps"
      @finish="finishTour"
      @skip="skipTour"
    />
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { QuestionFilled } from '@element-plus/icons-vue'

const props = defineProps({
  type: {
    type: String,
    default: 'flash-sale' // flash-sale, admin, monitor
  }
})

// 响应式数据
const showGuide = ref(false)
const showTour = ref(false)
const currentStepIndex = ref(0)

// 引导步骤配置
const guideStepsConfig = {
  'flash-sale': [
    {
      title: '欢迎来到限时秒杀',
      description: '这里是我们的秒杀专区，每天都有超值商品等你来抢！',
      image: '/images/guide/flash-sale-welcome.png',
      tips: [
        '每日10:00、14:00、20:00准时开始',
        '每场持续2小时，商品有限先到先得',
        '每个用户每件商品限购1件'
      ]
    },
    {
      title: '查看秒杀时间段',
      description: '点击不同的时间段可以查看对应的秒杀商品',
      image: '/images/guide/time-periods.png',
      tips: [
        '绿色表示正在进行中',
        '橙色表示即将开始',
        '灰色表示已结束'
      ]
    },
    {
      title: '参与秒杀抢购',
      description: '看中心仪的商品？点击"立即抢购"按钮参与秒杀！',
      image: '/images/guide/buy-now.png',
      tips: [
        '确保已登录账号',
        '库存实时更新，售完即止',
        '支付时间限制15分钟'
      ]
    },
    {
      title: '查看购买记录',
      description: '点击"我的记录"可以查看您的秒杀历史',
      image: '/images/guide/records.png',
      tips: [
        '可以查看所有秒杀记录',
        '支持按时间筛选',
        '可以直接跳转支付'
      ]
    }
  ],
  'admin': [
    {
      title: '秒杀管理后台',
      description: '欢迎使用秒杀管理系统，这里可以管理所有秒杀活动',
      tips: [
        '创建和管理秒杀活动',
        '添加和编辑秒杀商品',
        '查看实时数据统计'
      ]
    },
    {
      title: '创建秒杀活动',
      description: '点击"创建活动"按钮可以新建秒杀活动',
      tips: [
        '设置活动时间和描述',
        '活动创建后可以添加商品',
        '进行中的活动无法编辑'
      ]
    },
    {
      title: '实时监控',
      description: '通过监控面板可以查看系统实时状态',
      tips: [
        '监控QPS和响应时间',
        '查看系统健康状态',
        '及时发现异常情况'
      ]
    }
  ],
  'monitor': [
    {
      title: '实时监控面板',
      description: '这里可以监控秒杀系统的实时运行状态',
      tips: [
        '实时QPS和在线用户数',
        '系统性能指标监控',
        '异常告警及时通知'
      ]
    }
  ]
}

// 快捷操作引导
const tourStepsConfig = {
  'flash-sale': [
    {
      target: '.time-periods',
      title: '选择时间段',
      description: '点击这里选择不同的秒杀时间段'
    },
    {
      target: '.flash-sale-products',
      title: '浏览商品',
      description: '这里显示当前时间段的所有秒杀商品'
    },
    {
      target: '.buy-now-btn',
      title: '立即抢购',
      description: '点击这个按钮参与秒杀抢购'
    }
  ]
}

// 计算属性
const guideSteps = computed(() => guideStepsConfig[props.type] || [])
const tourSteps = computed(() => tourStepsConfig[props.type] || [])
const currentStep = computed(() => guideSteps.value[currentStepIndex.value] || {})

// 方法
const startGuide = () => {
  // 检查是否已经看过引导
  const hasSeenGuide = localStorage.getItem(`guide-seen-${props.type}`)
  if (hasSeenGuide) {
    showTour.value = true
  } else {
    showGuide.value = true
    currentStepIndex.value = 0
  }
}

const nextStep = () => {
  if (currentStepIndex.value < guideSteps.value.length - 1) {
    currentStepIndex.value++
  }
}

const prevStep = () => {
  if (currentStepIndex.value > 0) {
    currentStepIndex.value--
  }
}

const skipGuide = () => {
  showGuide.value = false
  localStorage.setItem(`guide-seen-${props.type}`, 'true')
  ElMessage.info('已跳过新手引导，可点击帮助按钮重新查看')
}

const finishGuide = () => {
  showGuide.value = false
  localStorage.setItem(`guide-seen-${props.type}`, 'true')
  ElMessage.success('新手引导完成！祝您使用愉快')
}

const finishTour = () => {
  showTour.value = false
  ElMessage.success('快捷操作引导完成')
}

const skipTour = () => {
  showTour.value = false
  ElMessage.info('已跳过快捷操作引导')
}

// 自动显示引导
const autoShowGuide = () => {
  const hasSeenGuide = localStorage.getItem(`guide-seen-${props.type}`)
  if (!hasSeenGuide && guideSteps.value.length > 0) {
    setTimeout(() => {
      showGuide.value = true
    }, 1000) // 延迟1秒显示
  }
}

// 组件挂载
onMounted(() => {
  autoShowGuide()
})
</script>

<style scoped>
.user-guide {
  position: relative;
}

.guide-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.guide-content {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.guide-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 0;
  border-bottom: 1px solid #f0f0f0;
}

.guide-header h3 {
  margin: 0;
  color: #303133;
  font-size: 18px;
}

.skip-btn {
  color: #909399;
  padding: 0;
}

.guide-body {
  padding: 24px;
}

.guide-image {
  text-align: center;
  margin-bottom: 20px;
}

.guide-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.guide-description p {
  font-size: 16px;
  line-height: 1.6;
  color: #606266;
  margin-bottom: 16px;
}

.guide-description ul {
  margin: 0;
  padding-left: 20px;
}

.guide-description li {
  color: #909399;
  margin-bottom: 8px;
  line-height: 1.5;
}

.guide-footer {
  padding: 0 24px 24px;
  border-top: 1px solid #f0f0f0;
}

.guide-progress {
  margin-bottom: 16px;
}

.guide-progress span {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
  display: block;
}

.guide-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.help-btn {
  position: fixed;
  bottom: 80px;
  right: 30px;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.help-btn:hover {
  transform: scale(1.1);
  transition: transform 0.2s;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .guide-content {
    width: 95%;
    margin: 20px;
  }
  
  .guide-header,
  .guide-body,
  .guide-footer {
    padding: 16px;
  }
  
  .help-btn {
    bottom: 60px;
    right: 20px;
  }
}
</style>
